import React from 'react';
import { NavBar, Grid } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import styles from './CloudPayment.module.css';

function CloudPayment() {
  const navigate = useNavigate();

  // 缴费类型数据
  const paymentTypes = [
    { icon: '🎓', title: '学费', color: '#6366f1', path: '/tuition-payment' },
    { icon: '🏠', title: '住宿费', color: '#f59e0b', path: '/accommodation-payment' },
    { icon: '💧', title: '水费', color: '#06b6d4', path: '/water-payment' },
    { icon: '🌐', title: '网费', color: '#10b981', path: '/internet-payment' },
    { icon: '⚡', title: '电费', color: '#ef4444', path: '/electricity-payment' },
    { icon: '💬', title: '话费', color: '#8b5cf6', path: '/phone-recharge' },
    { icon: '🍽️', title: '饭卡', color: '#f97316', path: '/card-recharge' }
  ];

  const handlePaymentClick = (item) => {
    if (item.title === '饭卡') {
      navigate('/card-recharge');
    } else if (item.title === '话费') {
      navigate('/phone-recharge');
    } else if (item.title === '学费') {
      navigate('/tuition-payment');
    } else {
      console.log(`点击了${item.title}`);
    }
  };

  return (
    <div className={styles.container}>
      <NavBar onBack={() => navigate('/layout/home')} className={styles.navBar}>
        云缴费
      </NavBar>
      
      <div className={styles.content}>
        <div className={styles.gridContainer}>
          {paymentTypes.map((item, index) => (
            <div 
              key={index} 
              className={styles.paymentItem}
              onClick={() => handlePaymentClick(item)}
            >
              <div 
                className={styles.iconWrapper}
                style={{ backgroundColor: item.color }}
              >
                <span className={styles.icon}>{item.icon}</span>
              </div>
              <span className={styles.title}>{item.title}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default CloudPayment;